import React from 'react';
import { History, Location, LocationDescriptor } from '../history';
import RouterContext from './context';
import { ContextValue, Message } from '.';
interface Props {

}
interface State {
    location: Location;
}
declare global {
    interface Window {
        onpushstate: (state: any, pathname: string) => void;
    }
}
//在此组件里定义一个Location路径对象，然后通过上下文传递给它的子组件们
export default class extends React.Component<Props, State> {
    locationState: any
    state = {
      location: {
        pathname: '/'
      }
    };
    componentDidMount() {
      console.log('BrowserRouter---');
      //原生的
      window.onpopstate = (event: PopStateEvent) => {
        this.setState({
          location: {
            ...this.state.location,
            pathname: document.location.pathname,
            state: event.state
          }
        });
      };

      //我们人造的
      window.onpushstate = (state: any, pathname: string) => {
        this.setState({
          location: {
            ...this.state.location,
            pathname,
            state
          }
        });
      }
    }
    render() {
      const that = this;//缓存this指针
      const history: History = {
        push(to: LocationDescriptor) {
          if (history.message) {
            const allow = window.confirm(history.message(typeof to === 'object' ? to as Location : {pathname: to}));
            if (!allow) return;
          }
          if (typeof to === 'object') {
            const {pathname, state} = to;
            window.history.pushState(state, '', pathname);
            window.onpushstate(state,pathname);
          } else {
            window.history.pushState(null, '', to);
            window.onpushstate(null,to);
          }
        },
        message: null,
        block(message: Message | null) {
          history.message = message;
        }
      };
      const contextValue: ContextValue = {
        location: this.state.location,
        history
      };
      return (
        <RouterContext.Provider value={contextValue}>
          {this.props.children}
        </RouterContext.Provider>
      )
    }
}
